<template>
    <el-dialog :title="dataForm.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" width="700"
        :close-on-click-modal="false" draggable>
        <el-form :model="dataForm" :rules="dataRules" label-width="110px" ref="dataFormRef" v-loading="loading">
            <el-row>

                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('inProduction.materialCode')" prop="materialCode" >
                        <!-- <el-select style="width: 85%" :placeholder="$t('basProcess.enterMaterialCode')" filterable remote @change="changeMaterialin"
                            :remote-method="getMaterial" v-model="dataForm.materialCode" :disabled="dataForm.id ? true : false">
                            <el-option v-for="item in materialList" :key="item.materialCode" :label="item.materialCode"
                                :value="item">
                                <span style="float: left">{{ item.materialCode }}</span>
                                <span style=" float: right;  color: var(--el-text-color-secondary);  font-size: 13px; "> {{
                                    item.materialName
                                }} </span>
                            </el-option>
                        </el-select> -->
                        <MaterialSelect @change="changeMaterialin" :placeholder="$t('basProcess.enterMaterialCode')" style="width: 85%;" v-model="dataForm.materialCode" :disabled="dataForm.id ? true : false" />
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="mb-6">
                        <el-form-item :label="$t('inProduction.processCode')" prop="processCode">
                                <el-select  v-model="dataForm.processCode" collapse-tags :placeholder="$t('inProduction.selectProcess')"
                                        style="width: 85%" :disabled="dataForm.id ? true : false" @change="changeProcess">
                                     <el-option v-for="item in optionsP" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                        </el-form-item>
                    </el-col>
                <!-- <el-col :span="12" class="mb20">
                    <el-form-item :label="$t('inProduction.inProductionQty')" prop="inProductionQty" >
                        <el-input style="width: 85%;" v-model="dataForm.inProductionQty" :placeholder="$t('inProduction.enterInProductionQty')" :disabled="dataForm.id ? true : false"/>
                    </el-form-item>
                </el-col> -->
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('inProduction.isForbidden')" prop="isForbidden">
                            <el-select style="width: 85%;" v-model="dataForm.isForbidden" >
                                <el-option v-for="item in optionsF" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                </el-col>
                <!-- <el-col :span="12" class="mb-6">
                     <el-form-item :label="$t('inProduction.productionLine')" prop="productionLine">
                        <el-select style="width: 85%" :placeholder="$t('basProcess.productionLine')" filterable remote @change="changeProductionLine"
                            :remote-method="getProductionLine" v-model="dataForm.productionLine" :disabled="dataForm.id ? true : false">
                            <el-option v-for="item in productionLineList" :key="item.value" :label="item.value"
                                :value="item">
                                <span style="float: left">{{ item.value }}</span>
                                
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('inProduction.forbiddenTime')" prop="forbiddenTime">
                        <el-date-picker format="YYYY-MM-DD HH:mm:ss" style="width: 86%" v-model="dataForm.forbiddenTime" type="date"  :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('inProduction.attribute1')" prop="attribute1">
                        <el-input style="width: 85%" clearable :placeholder="$t('inProduction.attribute1')" v-model="dataForm.attribute1" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false" icon="Close">{{$t('inProduction.cancel')}}</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading" icon="Check">{{$t('inProduction.confirm')}}</el-button>
        </span>
    </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue';
import {useMessage} from "/@/hooks/message";
import {getAllProductionline,getProcessList,createOrUpdateInProduction,getMaterialByNameOrCode} from "/@/api/platform/wms/inProduction"
const emit = defineEmits(['refresh']);
import {useI18n} from 'vue-i18n';
import Space from 'element-plus/es/components/space/src/space';
import MaterialSelect from "/@/components/mes/select/MaterialSelect.vue";

const {t} = useI18n();
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const detail = ref(false);
const materialList = ref()
const productionLineList = ref()
const optionsP = ref([])
// 定义form数据
const form = reactive({
    id: ''
})

//加载工序
onMounted(() => {
    getProcessList().then(res => {
        optionsP.value = res.data
    })
})

const dataForm = reactive({
    materialName: '',
    materialSpec: '',
    materialCode: '',
    processCode: "",
    processName: "",
    inProductionQty: '',
    isForbidden: '',
    productionLine: '',
    forbiddenTime: '',
    attribute1: '',
})
//是否启用
const optionsF = [
    {
        value: 'Y',
        label: t('inProduction.yes'),
    },
    {
        value: 'N',
        label: t('inProduction.no'),
    }
]
const options = ref([
    { label: t('inProduction.yes'), value: 'yes' },
    { label: t('inProduction.no'), value: 'no' }
]);

//把选择器的值赋值给入参
const changeMaterialin =(data: any) => {
    dataForm.materialCode = data.materialCode;
    dataForm.materialName = data.materialName;
}
const changeProductionLine =(data: any) => {
    dataForm.productionLine = data.value;
}
const changeProcess =(data: any) => {
    dataForm.processCode = data;
}

const getMaterial = (query: string) => {
    getMaterialByNameOrCode({
        "materialCode": query
    }).then((res: any) => {
        if (res.code == 0) {
            materialList.value = res.data
        }
    })
}
const getProductionLine = (query: string) => {
    getAllProductionline({
        "ProductionlineCode": query
    }).then((res: any) => {
        if (res.code == 0) {
            productionLineList.value = res.data
        }
    })
}

// 定义表单校验规则
const dataRules = reactive({
  materialCode: [
    {required: true, message: t('inProduction.enterMaterialCode'), trigger: 'blur'},
  ],
  isForbidden: [
    {required: true, message: t('inProduction.selectIsForbidden'), trigger: 'blur'},
  ],
  attribute1:[
    // 限制数字
    {pattern:/^\d*\.?\d*$/, message: t('inProduction.enterNumbersOnly'), trigger: 'blur'},
  ],
})

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {
  });
  if (!valid) return false;

  if (dataForm.attribute1.includes(".") > 0) {
    useMessage().error(t('inProduction.enterNumbersOnly'));
    return false;
  }

  try {
    loading.value = true;
    dataForm.forbiddenTime = undefined;
    dataForm.id = dataForm.id ? dataForm.id : 0;
    await createOrUpdateInProduction(dataForm);
    useMessage().success(dataForm.id ? t('inProduction.editSuccess'): t('inProduction.addSuccess'));
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};

// 打开弹框
const openAddDialog = () => {
    visible.value = true;
    dataForm.id = ''
    dataForm.materialName = '';
    dataForm.materialSpec = '';
    dataForm.materialCode = '';
    dataForm.processCode = '';
    dataForm.processName = '';
    dataForm.inProductionQty = '';
    dataForm.isForbidden = '';
    dataForm.productionLine = '';
    dataForm.forbiddenTime = '';
    dataForm.attribute1 = '';
    dataFormRef.value = null
    // 重置表单数据
    nextTick(() => {
        dataFormRef.value?.resetFields();
    });

};

// 编辑弹框
const openEditDialog = (data: any) => {
    visible.value = true;
    // 将data中的数据解构到dataForm中
    Object.assign(dataForm, data);
}

// 暴露变量
defineExpose({
    openAddDialog, openEditDialog
});
</script>
